<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>设备通讯</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <script src="/statics/js/custom/lib.js?_V=1"></script>
    <link rel="stylesheet" href="/statics/css/station/detail.css?_v=1">
    <script type="text/javascript" src="/statics/plugins/echarts/echarts.min.js?v=1"></script>
    <style>
        #tableAjaxId tbody tr td:last-child{
            max-width: 800px;
        }
    </style>
</head>

<body ng-app="">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <ng-include src="'/admin/common/sidebar.html'"></ng-include>
        <!--End 左侧导航-->
        <!--头部信息-->
        <ng-include src="'/admin/common/header.html'"></ng-include>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid p-t-55">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header d-block pr-0 pl-0">
                                    <div class="card-title">设备通讯</div>
                                </header>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row baseData">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body pt-0 pb-0">
                                <header class="card-header pr-0 pl-0 p-t-10 pb-2 d-flex">
                                    <div class="header-1">
                                        <i class="fa fa-bar-chart"></i>
                                        <div class="card-title p-l-10 font-s1">通讯报告次数</div>
                                    </div>
                                    <div>
                                        <form class="form-inline form-space-b" method="post">
                                            <div class="mx_search">
                                                <div class="form-group m-r-10">
                                                    <input class="form-control width80 js-datetimepicker dates" autocomplete="off"
                                                           data-date-format="yyyy-mm" type="text" id="30Time"
                                                           dateType="month"
                                                           name="startTime" placeholder="选择月份">
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <a class="btn btn-primary m-r-10" id="30TimeSearch"><i
                                                            class="mdi mdi-magnify"></i> 搜索</a>
                                                    <button class="btn btn-secondary" id="30TimeReset"><i
                                                            class="mdi mdi-delete"></i> 重置查询
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </header>
                                <div id="chart-vbar-1" style="width: 100%;height: 278px;padding-top: 8px;padding-bottom: 8px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-signal"></i>
                                        <div class="card-title p-l-10 font-s1">信号强度</div>
                                    </div>
                                </header>
                                <div id="csqChart" style="width: 100%;height: 260px;"></div>
                                <div class="signal_num">
                                    <span class="mx_html" name="csq" id="signalNum"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-credit-card"></i>
                                        <div class="card-title p-l-10 font-s1">SIM卡信息</div>
                                    </div>
                                </header>
                                <img class="p-t-10" style="height:68px;float:right;" src="/statics/images/sim-cm.png">
                                <ul class="list-group clear-list col-sm-12 p-t-10">
                                    <li class="list-group-item border-n-0">
                                        <span class="pull-right mx_html" name="iccid"></span>ICCID
                                    </li>
                                    <li class="list-group-item border-n-0">
                                        <span class="pull-right">2021-06-11 15:56:39</span>激活时间
                                    </li>
                                    <li class="list-group-item border-n-0">
                                        <span class="pull-right">2028-05-31 23:59:59</span>过期时间
                                    </li>
                                    <li class="list-group-item border-n-0 border-bottom-0">
                                        <span class="pull-right">5.16M / 300.00M</span>月流量
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body pt-0">
                                <header class="card-header pr-0 pl-0">
                                    <div class="header-1">
                                        <i class="fa fa-list-alt"></i>
                                        <div class="card-title p-l-10 font-s1">通信日志</div>
                                    </div>
                                </header>
                                <div class="clearfix p-b-10">
                                    <form class="form-inline form-space-b" id="searchForm" method="post">
                                        <div class="mx_search p-t-10">
                                            <div class="form-group">
                                                <div class="form-group m-r-10">
                                                    <select class=" select-init select-cascade width150 form-control" isDefault="1" dataKey="orderType"
                                                            defaultOptionText="请选择命令类型" cascadePid="pid" cascadeId="type" cascadeKey="type"
                                                            id="orderTypeId" name="orderTypeId"></select>
                                                </div>
                                                <div class="form-group m-r-10 ">
                                                    <select class="form-control width150" isDefault="1"  id="type" name="type"
                                                            defaultOptionText="请选择通讯类型"></select>
                                                </div>
                                            </div>
                                            <div class="form-group m-r-10">
                                                <input class="form-control width150 js-datetimepicker dates" autocomplete="off"
                                                       data-date-format="yyyy-mm-dd hh:ii" type="text" id="startTime"
                                                       dateType="minute" name="startTime" placeholder="开始时间">
                                                <span class="input-group-addon border-0" style="text-align: center;width: 30px;"><i class="mdi mdi-chevron-right"></i></span>
                                                <input class="form-control width150 js-datetimepicker dates" autocomplete="off"
                                                       data-date-format="yyyy-mm-dd hh:ii" type="text" id="endTime"
                                                       dateType="minute" name="endTime" placeholder="结束时间">
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-primary m-r-10" id="searchButton"><i
                                                        class="mdi mdi-magnify"></i> 搜索</a>
                                                <button class="btn btn-secondary m-r-10" id="resetButton"><i
                                                        class="mdi mdi-delete"></i> 重置查询</button>
                                            </div>
                                        </div>
                                        <div class="form-inline p-t-10">
                                            <a href="#!" class="btn btn-success0 m-l-10" data-toggle="modal"
                                               data-target="#dataDIV" id="duizhang" style="display: none">
                                                <i class="fa fa-file-text-o"></i>
                                                <span>对账召回</span>
                                            </a>
                                            <a href="#!" class="btn btn-primary0 m-l-10"  id="zhuangtai">
                                                <i class="fa fa-cloud-upload"></i>
                                                <span>读取状态</span>
                                            </a>
                                            <a href="#!" class="btn btn-danger m-l-10" id="chongqi">
                                                <i class="fa fa-refresh"></i>
                                                <span>设备重启</span>
                                            </a>
                                        </div>
                                    </form>
                                </div>
                                <table id="tableAjaxId">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade bs-example-modal-lg" id="dataDIV" tabindex="-1" role="dialog"
                     aria-labelledby="myLargeModalLabel" data-backdrop="static">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="modal-title p-l-10">对账召回</div>
                                <div class="float-right">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </div>
                            <div class="modal-body">
                                <form id="data_form" class="form-horizontal">
                                    <div class="form-group col-md-12 mx_validator">
                                        <label for="dataTime">选择时间</label>
                                        <input class="form-control js-datetimepicker dates mx_required"
                                               autocomplete="off"
                                               data-date-format="yyyy-mm-dd" type="text" id="dataTime" name="dataTime"
                                               mx_required_type="select"  dateType="day" placeholder="请选择时间">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary mx_validator_button" id="btn_upd_data">保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="/statics/js/apis/station/station.js"></script>
<script type="text/javascript" src="/statics/js/custom/table.js?_v=1.1"></script>
<script type="text/javascript" src="/statics/js/custom/select.js"></script>
<script type="text/javascript" src="/statics/js/custom/selectCascade.js"></script>
<script type="text/javascript" src="/statics/js/library/station/cmd.js"></script>
</body>
</html>
